<template>
  <view class="album-detail">
    <!-- 顶部封面区域 -->
    <view class="album-header">
      <image 
        :src="album.coverUrl || '/static/default-album.png'" 
        mode="aspectFill" 
        class="album-cover"
      ></image>
      <view class="album-info">
        <view class="title-row">
          <text class="album-title">{{ album.title }}</text>
          <view v-if="album.status === 0" class="privacy-badge">
            <text>私密</text>
          </view>
        </view>
        <text class="photo-count">{{ album.photoCount || 0 }}张照片</text>
      </view>
      <!-- 编辑按钮 -->
      <view class="edit-btn" @click="goEdit">
        <u-icon name="edit" size="20" color="#666"></u-icon>
      </view>
    </view>

    <!-- 照片网格 -->
    <scroll-view 
      class="photo-grid-container" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 加载中状态 -->
      <view class="loading-state" v-if="isLoading && !photos.length">
        <view class="loading-spinner">
          <u-loading-icon size="36" color="#3a8838"></u-loading-icon>
        </view>
        <text>加载中...</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-else-if="!photos.length">
        <u-icon name="photo" size="80" color="#ddd"></u-icon>
        <text class="empty-text">暂无照片</text>
        <text class="empty-subtext">点击底部"上传照片"按钮添加照片</text>
      </view>

      <!-- 照片网格 -->
      <view v-else class="photo-grid">
        <view 
          class="photo-item"
          v-for="(photo, index) in photos"
          :key="photo.id"
          @click="previewPhoto(index)"
        >
          <image 
            :src="photo.url" 
            mode="aspectFill"
          ></image>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="loading-more" v-if="isLoading && photos.length">
        <view class="loading-spinner">
          <u-loading-icon size="24" color="#999"></u-loading-icon>
        </view>
        <text>加载中...</text>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <view class="action-btn upload" @click="uploadPhotos">
        <u-icon name="upload" size="24" color="#3a8838"></u-icon>
        <text>上传照片</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      albumId: '',
      album: {},
      photos: [],
      page: 1,
      pageSize: 20,
      isLoading: false,
      isRefreshing: false,
      noMoreData: false
    }
  },
  onLoad(options) {
    this.albumId = options.id;
    if (!this.albumId) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      return;
    }
    this.loadAlbumInfo();
    this.loadPhotos();
  },
  methods: {
    // 加载相册信息
    async loadAlbumInfo() {
      try {
        // TODO: 调用获取相册详情API
        // const result = await getAlbumDetail(this.albumId);
        // this.album = result.data;
      } catch (error) {
        console.error('加载相册信息失败:', error);
        uni.showToast({
          title: '加载相册信息失败',
          icon: 'none'
        });
      }
    },
    
    // 加载照片
    async loadPhotos(isRefresh = false) {
      if (isRefresh) {
        this.page = 1;
        this.noMoreData = false;
      }
      
      if (this.isLoading || (this.noMoreData && !isRefresh)) return;
      
      this.isLoading = true;
      try {
        // TODO: 调用获取相册照片API
        // const result = await getAlbumPhotos({
        //   albumId: this.albumId,
        //   current: this.page,
        //   size: this.pageSize
        // });
        // const photos = result.data.records || [];
        // if (isRefresh) {
        //   this.photos = photos;
        // } else {
        //   this.photos.push(...photos);
        // }
        // this.noMoreData = photos.length < this.pageSize;
        // this.page++;
      } catch (error) {
        console.error('加载照片失败:', error);
        uni.showToast({
          title: '加载照片失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
        if (isRefresh) {
          this.isRefreshing = false;
        }
      }
    },
    
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true;
      await this.loadPhotos(true);
    },
    
    // 加载更多
    loadMore() {
      this.loadPhotos();
    },
    
    // 预览照片
    previewPhoto(index) {
      const urls = this.photos.map(p => p.url);
      uni.previewImage({
        urls,
        current: index
      });
    },
    
    // 上传照片
    uploadPhotos() {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          // TODO: 实现照片上传逻辑
          console.log('选择的照片:', res.tempFilePaths);
        }
      });
    },
    
    // 跳转到编辑页
    goEdit() {
      uni.navigateTo({
        url: `/pages/album/edit?id=${this.albumId}`
      });
    }
  }
}
</script>

<style>
.album-detail {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.album-header {
  position: relative;
  height: 400rpx;
}

.album-cover {
  width: 100%;
  height: 100%;
}

.album-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
}

.title-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.album-title {
  font-size: 36rpx;
  font-weight: bold;
}

.privacy-badge {
  margin-left: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.photo-count {
  font-size: 28rpx;
  opacity: 0.8;
}

.edit-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.photo-grid-container {
  flex: 1;
  padding: 10rpx;
}

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 5rpx;
}

.photo-item {
  width: calc(33.33% - 10rpx);
  margin: 5rpx;
  aspect-ratio: 1;
  background-color: #fff;
  border-radius: 8rpx;
  overflow: hidden;
}

.photo-item image {
  width: 100%;
  height: 100%;
}

.bottom-action-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
}

.action-btn text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.upload {
  background-color: #e8f5e9;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;
}

.loading-image {
  width: 72rpx;
  height: 72rpx;
}

.loading-image-small {
  width: 48rpx;
  height: 48rpx;
}

.loading-state, .empty-state {
  padding: 100rpx 0;
  text-align: center;
  color: #999;
}

.empty-text {
  margin-top: 30rpx;
  display: block;
  font-size: 30rpx;
  color: #666;
}

.empty-subtext {
  margin-top: 10rpx;
  display: block;
  font-size: 26rpx;
  color: #999;
}

.loading-more {
  padding: 30rpx 0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}
</style> 